<!-- eslint-disable vue/no-useless-template-attributes -->
<!-- 数据中心配置 -->
<template>
	<div class="container">
		<yd-form :options="formOptions" :model="queryParams" :btns="formBtns"></yd-form>
		<!--查询列表-->
		<!-- <YdTable
			:formData="queryParams"
			:tableConfig="tableConfig"
			:tableData="dataList"
			@sizeChangeHandler="getList"
			@currentChangeHandler="getList"
			@sortChangeHandler="getList"
		>
			<template #expand="props">
				<YdTable :formData="queryParams" :tableConfig="tableConfig2" :tableData="props.data.children" @sortChangeHandler="getList"></YdTable>
			</template>
		</YdTable> -->
		<el-table v-loading="loading" stripe :data="dataList" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
			<el-table-column label="数据中心名称" prop="name"></el-table-column>
			<el-table-column label="排序" prop="sequence" :show-overflow-tooltip="true" />
			<el-table-column label="备注" prop="remarks" :show-overflow-tooltip="true" />
			<el-table-column label="更新时间" prop="updateTime" width="240">
				<template #default="scope">
					<span>{{ scope.row.updateTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" class-name="small-padding fixed-width">
				<template #default="scope">
					<template v-if="!scope.row.children">
						<el-button v-hasPermi="['basic:dataCenter:editArea']" size="small" type="text" @click="handleAreaUpdate(scope.row)">修改 </el-button>
					</template>
					<template v-else>
						<el-button v-hasPermi="['basic:dataCenter:addOrEdit']" size="small" type="text" @click="handleUpdate(scope.row)">修改 </el-button>
						<el-button v-hasPermi="['basic:dataCenter:addArea']" size="small" type="text" @click="handleAddArea(scope.row)">分配区域 </el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>
		<!-- 添加或修改参数配置对话框 -->
		<el-dialog v-model="open" :title="title" width="500px" append-to-body center>
			<el-form ref="conForm" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="数据中心名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入数据中心名称" maxlength="10" />
				</el-form-item>
				<el-form-item label="排序" prop="sequence">
					<el-input-number v-model="form.sequence" placeholder="请输入排序" controls-position="right" :min="1" />
				</el-form-item>
				<el-form-item label="备注" prop="remarks">
					<el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" maxlength="100"></el-input>
				</el-form-item>
			</el-form>
			<template #footer class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</template>
		</el-dialog>

		<!-- 添加区域对话框-分配 -->
		<el-dialog v-model="areaAddOpen" :title="title" width="640px" center append-to-body>
			<el-transfer v-model="rightData" filterable filter-placeholder="请输入区域名称" :data="areaData" :titles="['未分配', '已分配']"></el-transfer>
			<template #footer class="dialog-footer">
				<el-button type="primary" :loading="commitLoading" @click="submitAreaForm">确 定</el-button>
				<el-button :loading="commitLoading" @click="cancel">取 消</el-button>
			</template>
		</el-dialog>

		<!-- 修改区域对话框 -->
		<el-dialog v-model="areaUpdateOpen" :title="title" width="800px" center append-to-body>
			<el-form ref="editForm" :model="areaForm" :rules="rules" label-width="80px">
				<el-form-item label="区域名称" prop="areaName">
					<el-input v-model="areaForm.name" :disabled="true" maxlength="30" />
				</el-form-item>
				<el-form-item label="排序" prop="sequence">
					<el-input-number v-model="areaForm.sequence" controls-position="right" :min="1" />
				</el-form-item>
				<el-form-item label="备注" prop="remarks">
					<el-input v-model="areaForm.remarks" type="textarea" placeholder="请输入内容" maxlength="100"></el-input>
				</el-form-item>
			</el-form>
			<template #footer class="dialog-footer">
				<el-button type="primary" @click="submitAreaUpdateForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="DataCenter" lang="tsx">
import { getDataList, getDetail, delDataCenter, addDataCenter, updateDataCenter } from '@/api/management/operationConfig/dataCenter';
import { ref, reactive, onMounted, toRefs, getCurrentInstance } from 'vue';
import { handleTree } from '@/utils/common';
import { useRouter } from 'vue-router';
import {
	getAreaIdList,
	getAreaList,
	getAreaDetail,
	delDataCenterArea,
	addDataCenterArea,
	updateDataCenterArea,
} from '@/api/management/operationConfig/dataCenterArea';
const { proxy }: any = getCurrentInstance();

let queryParams = reactive({
	pageNum: 1,
	pageSize: 10,
	isAsc: '',
	orderByColumn: '',
});
const formOptions = reactive<FormOptionType>([
	{
		type: 'input',
		label: '数据中心名称',
		prop: 'name',
		attrs: {
			clearable: true,
		},
		span: 8,
		placeholder: '请输入数据中心名称',
	},
]);
const formBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '查询',
		handler: searchHandler,
	},
]);

// 列表相关
let tableConfig = reactive<TableConfigType>({
	// url: queryWeekdays,
	expand: true,
	columns: [
		{
			label: '数据中心名称',
			prop: 'name',
		},
		{
			label: '排序',
			prop: 'sequence',
			showOverFlowToolTip: true,
		},
		{
			label: '备注',
			prop: 'remarks',
			showOverFlowToolTip: true,
		},
		{
			label: '更新时间',
			prop: 'updateTime',
		},
		{
			label: '操作',
			prop: '',
			operation: [
				{
					text: '修改',
					handler: (scope: anyObj) => handleUpdate(scope.row),
					permi: ['basic:dataCenter:addOrEdit'],
				},
				{
					text: '分配区域',
					handler: (scope: anyObj) => handleAddArea(scope.row),
					permi: ['basic:dataCenter:addArea'],
				},
			],
		},
	],
	disableOrderNumber: true,
	loading: false,
});
let tableConfig2 = reactive<TableConfigType>({
	// url: queryWeekdays,
	columns: [
		{
			label: '数据中心名称',
			prop: 'name',
		},
		{
			label: '排序',
			prop: 'sequence',
			showOverFlowToolTip: true,
		},
		{
			label: '备注',
			prop: 'remarks',
			showOverFlowToolTip: true,
		},
		{
			label: '更新时间',
			prop: 'updateTime',
		},
		{
			label: '操作',
			prop: '',
			operation: [
				{
					text: '修改',
					handler: (scope: anyObj) => handleAreaUpdate(scope.row),
					permi: ['basic:dataCenter:editArea'],
				},
			],
		},
	],
	disableOrderNumber: true,
	loading: false,
});

const dataList = ref([]);
// 搜索按钮
function searchHandler() {
	queryParams.pageNum = 1;
	queryParams.pageSize = 10;
	getList();
}
// 查询列表
function getList() {
	// tableConfig.loading = true;
	loading.value = true;
	getDataList(queryParams).then((res: ApiResponse) => {
		// tableConfig.loading = false;
		loading.value = false;
		if (res.code !== 0) {
			proxy.$modal.msgError(res.msg);
			return;
		}
		dataList.value = handleTree(res.data, 'treeId', 'centerId');
	});
}
/** 查询区域列表 */
function queryAreaList() {
	getAreaList().then((response: ApiResponse) => {
		areaData.value = response.data;
		console.log(areaData.value, 'areaData');
	});
}
/** 查询区域Id列表 */
function queryAreaIdList() {
	getAreaIdList({ centerId: centerId.value }).then((response: ApiResponse) => {
		rightData.value = response.data;
		console.log(response.data, 'rightData');
		areaAddOpen.value = true;
	});
}
const commitLoading = ref(false);
// 遮罩层
const loading = ref(true);
// 数据中心表格数据
const centerId = ref('');
//区域列表
const areaData = ref([]);
//区域选中列表
const rightData = ref([]);
// 弹出层标题
const title = ref('');
// 是否显示弹出层
const open = ref(false);
// 区域修改弹窗
const areaUpdateOpen = ref(false);
// 区域分配弹窗
const areaAddOpen = ref(false);
// 表单参数
const data = reactive<anyObj>({
	form: {},
	areaForm: {},
});
const { form, areaForm } = toRefs(data);
// 表单校验
const rules = ref({
	name: [{ required: true, message: '数据中心名称不能为空', trigger: 'blur' }],
	sequence: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
});

// 表单重置
function reset() {
	form.value = {
		name: undefined,
		sequence: undefined,
		remarks: null,
	};
	areaForm.value = {
		id: undefined,
		areaId: undefined,
		name: undefined,
		sequence: 0,
		remarks: undefined,
	};
}
/** 修改按钮操作 */
function handleUpdate(row: anyObj) {
	reset();
	const ids = row.id;
	getDetail(ids).then((response: ApiResponse) => {
		console.log(response, '修改');
		form.value = response.data;
		open.value = true;
		title.value = '修改数据中心';
	});
}
/** 区域修改按钮操作 */
function handleAreaUpdate(row: anyObj) {
	reset();
	const ids = row.regoinId;
	getAreaDetail(ids).then((response: ApiResponse) => {
		areaForm.value = response.data;
		areaUpdateOpen.value = true;
		title.value = '修改数据中心区域';
	});
}

/** 删除按钮操作 */
function handleDelete(row: anyObj) {
	const Ids = row.id;
	proxy.$modal
		.confirm('是否确认删除选择项?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(function () {
			return delDataCenter(Ids);
		})
		.then(() => {
			getList();
			proxy.$modal.msgSuccess('删除成功');
		})
		.catch(() => {});
}

/** 区域删除按钮操作 */
function handleAreaDelete(row: anyObj) {
	const ids = row.regoinId;
	proxy.$modal
		.confirm('是否确认删除选择项?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(function () {
			return delDataCenterArea(ids);
		})
		.then(() => {
			getList();
			proxy.$modal.msgSuccess('删除成功');
		})
		.catch(() => {});
}
// 分配区域弹窗
function handleAddArea(row: anyObj) {
	queryAreaList();
	centerId.value = row.id;
	queryAreaIdList();
	title.value = '修改分配区域中心';
}
// 取消按钮
function cancel() {
	open.value = false;
	areaUpdateOpen.value = false;
	areaAddOpen.value = false;
}
/** 提交按钮 */
function submitForm() {
	proxy.$refs['conForm'].validate((valid: anyObj) => {
		if (valid) {
			if (form.value.id !== undefined) {
				updateDataCenter(form.value).then((response: ApiResponse) => {
					if (response.code === 0) {
						proxy.$modal.msgSuccess('修改成功');
						open.value = false;
						getList();
					} else {
						proxy.$modal.msgWarning(response.msg);
						return;
					}
				});
			} else {
				addDataCenter(form.value).then((response: ApiResponse) => {
					if (response.code === 0) {
						proxy.$modal.msgSuccess('新增成功');
						open.value = false;
						getList();
					} else {
						proxy.$modal.msgWarning(response.msg);
						return;
					}
				});
			}
		}
	});
}

/** 分配提交按钮 */
function submitAreaForm() {
	commitLoading.value = true;
	addDataCenterArea({ areaIds: rightData.value, centerId: centerId.value }).then((response) => {
		if (response.code === 0) {
			proxy.$modal.msgSuccess('分配完成！');
			commitLoading.value = false;
			areaAddOpen.value = false;
			getList();
		} else {
			proxy.$modal.msgWarning(response.msg);
			commitLoading.value = false;
			return;
		}
	});
}

/**区域信息修改提交*/
function submitAreaUpdateForm() {
	proxy.$refs['editForm'].validate((valid: anyObj) => {
		if (valid) {
			updateDataCenterArea(areaForm.value).then((response: ApiResponse) => {
				if (response.code === 0) {
					proxy.$modal.msgSuccess('修改成功');
					areaUpdateOpen.value = false;
					getList();
				} else {
					proxy.$modal.msgWarning(response.msg);
					return;
				}
			});
		}
	});
}
searchHandler();
</script>
<style lang="scss" scoped>
.container {
	margin: 10px;
}
</style>
